<template>
    <n-modal v-model:show="show" @after-enter="showed">
        <n-card style="width: 600px" title="配置" :bordered="false" size="huge" role="dialog" aria-modal="true">
            <n-form ref="formRef" label-placement="left" label-width="80" label-align="left">
                <n-form-item path="" label="openai key">
                    <n-input type="password" v-model:value="saveKey" placeholder="输入你的openai key" />
                </n-form-item>
                <n-form-item path="" label="语音转换">
                    <n-switch v-model:value="configStore.device">
                        <template #checked>
                            音频设备输入
                        </template>
                        <template #unchecked>
                            选择文件输入
                        </template>
                    </n-switch>
                </n-form-item>
                <n-form-item class="config-button">
                    <n-space justify="end">
                        <n-button type="info" @click="saveConfig">保存配置</n-button>
                    </n-space>
                </n-form-item>
                <n-form-item class="config-button">
                    <n-space justify="end">
                        <n-checkbox type="primary" v-model:checked="configStore.review" @update-checked="saveReview">
                            开启预览
                        </n-checkbox>
                    </n-space>
                </n-form-item>
            </n-form>
        </n-card>
    </n-modal>
</template>

<script lang="ts" setup>
import { useVModels } from '@vueuse/core';
import { NModal, NForm, NFormItem, NSpace, NButton, NInput, NCard, NCheckbox } from 'naive-ui';
import { ref } from 'vue';
import { useConfigStore } from '@/stores/config';

const props = defineProps<{
    show: boolean
}>();
const emits = defineEmits(['update:show']);

const { show } = useVModels(props, emits);

const saveKey = ref();
const configStore = useConfigStore();
/**
 * 展开后的操作
 */
const showed = () => {
    saveKey.value = configStore.apikey;
}
/**
 * 保存配置
 */
const saveConfig = () => {
    if (saveKey.value !== null && '' !== saveKey.value) {
        configStore.apikey = saveKey.value;
    }
}
/**
 * 保存预览
 * @param checked 选中状态
 */
const saveReview = (checked: boolean) => {
    configStore.review = checked
}
</script>